import * as React from 'react';
import { Pagination, Spin } from 'antd';
import {observer} from 'mobx-react';
import topicStore from '../../mobx/topic';
import { Link } from 'react-router-dom';


interface Author {
	avatar_url: string
	id: string
}

interface topicObject {
	title: string
	author: Author
	id: string
}

@observer
class TopicIndex extends React.Component<any, any> {
	constructor(props: any) {
		super(props);
		this.state = {
			loading: false,
			tabs: [
				{ tab: '', title: '全部' },
				{ tab: 'ask', title: '提问' },
				{ tab: 'share', title: '分享' },
				{ tab: 'job', title: '招聘' }
			]
		}
	}

	tabTemplate = (tab: any, index: number) => {
		const currentTab = topicStore.topic.tab
		return (
			<span
				style={tab.tab == currentTab ? { backgroundColor: '#80bd01', color: 'white' } : {}}
				key={index}
				className={'tab-span'}
				onClick={() => topicStore.filter(tab.tab)}>
				{tab.title}
			</span>
		)
	}

	topicTemplate = (topic: topicObject, index: number) => {
		return (
			<div key={index} className={'topic-inner-container'}>
				<div className={'author-avatar-container'}>
					<img src={topic.author.avatar_url} className={'author-avatar'} />
				</div>
				<div className={'line-limit-length'}>
					<Link to={`/topic/${topic.id}`} >
						<span>{topic.title}</span>
					</Link>
				</div>
			</div>
		)
	}

	render() {
		const { tabs } = this.state
		return (
			<div className={'topic-container'}>
				{topicStore.topic.loading ? (<Spin />) : (null)}

				<div className={'tabs-container'}>
					{tabs.map((tab: any, index: number) => {
						return this.tabTemplate(tab, index)
					})}
				</div>

				{topicStore.topic.data.map((topic: topicObject, index: number) => {
					return this.topicTemplate(topic, index)
				})}

				<Pagination
					total={5000}
					current={topicStore.topic.page}
					onChange={topicStore.flip}
					pageSize={20} />
			</div>
		)
	}
}

export default TopicIndex;